<template>
  <div>
    <h1>watch监听属性</h1>
    <p>{{ msg }}</p>
    <button @click="changeObj">改变obj</button>
  </div>
</template>

<script>
/**
 * 计算属性和监听属性对比：
 * 1.这两个属性内部对data变量都有监听行为
 * 
 * 2.计算属性：计算一个结果并一定要返回该结果，用于渲染页面
 * 监听属性：监听到data变量的变化，实现某些功能
 */
export default {
  data() {
    return {
      msg: "Hi,Vue!",
      obj: {
        name: "zh",
        age: 24,
      },
    };
  },
  watch: {
    // 监听属性的函数名要和被监听的变量名一致
    // 简单类型
    msg(newValue, oldValue) {
      console.log("msg的值", newValue, oldValue);
    },

    // 复杂类型
    // obj(newValue, oldValue){
    //   console.log(newValue, oldValue);
    // }
    // 修改对象本身(修改对象地址)可以用函数监听，如果是修改对象属性就必须用对象监听并开启深度监听
    // 完整写法
    obj: {
      // 发生变化就会执行(回调)
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
      deep: true, // 开启深度监听
      immediate: true // 立即执行，即页面初始化时就立即执行handler
    },
  },
  methods: {
    changeMsg() {
      this.msg = Math.random() * 10 + 8;
    },
    changeObj() {
      this.obj.age = Math.floor(Math.random() * 100 + 1);
    },
  },
};
</script>

<style>
</style>